@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&display=swap');

/*voortgangsbar met categorienamen*/
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
    z-index: 2 !important;
    color: #fff !important;
    background-color: #bd57fd !important;
    border-color: #bd57fd !important;
}

/*bs5 progress bar*/
.progress {

    --bs-progress-bar-bg: #bd57fd;

}

/*kleur knop multiselct form na klikken 'verwerken...' */
.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #1f3733;
    --bs-btn-border-color: #1f3733;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #1f3733;
    --bs-btn-hover-border-color: #1f3733;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #1f3733;
    --bs-btn-active-border-color: #1f3733;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #1f3733;
    --bs-btn-disabled-border-color: #1f3733;
}
    
/*selectievakken groter maken */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
}

/* Standaard: alle tekst 'Atkinson Hyperlegible', Sans + kleur */
body, p, a, input, textarea {
    font-family: 'Lexend', sans-serif !important;
    color: rgb(31, 55, 51);
}

/* Titel en H1: 'Atkinson Hyperlegible' */
h1, .page-title {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    color: rgb(31, 55, 51) !important;
    font-weight: bold !important;
}

/* H2 en H3: expliciet 'Atkinson Hyperlegible' Sans */
h2, h3, button, .tab-title {
    font-family: 'Atkinson Hyperlegible', sans-serif !important;
    color: rgb(31, 55, 51) !important;
    font-weight: bold !important;
}

/* Verberg alle navbars */
.navbar {
    display: none !important;
}

footer .footer-bottom {
    display: none !important;
}


/* Pagina links + boven uitlijnen */ 
body { 
    margin: 0 !important; 
    padding: 0 !important; 
    display: flex !important; 
    flex-direction: column !important; 
    align-items: flex-start !important; 
    justify-content: flex-start !important; 
} 

/* Weghalen witruimte bovenaan pagina */ 
.columnBlockLayout { 
    margin-top: 0px !important; 
}


/* START voor multiselect velden */
/* Geselecteerde items */
.msos-selecteditems-container,
.msos-selecteditems-container * {
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
    color: rgb(31, 55, 51) !important;
}

/* Placeholder ("opties selecteren of zoeken") */
.msos-search-input {
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
    color: rgb(31, 55, 51) !important;
}

/* Dropdown opties */
.msos-option,
.msos-option * {
    font-family: 'Lexend', sans-serif !important;
    font-size: 16px !important;
    color: rgb(31, 55, 51) !important;
}

/* .msos-container → GEEN inner padding (zoals Bootstrap) */
.msos-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 50px;
    min-height: 38px;

    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    padding: 0 !important; /* BELANGRIJK: geen inner padding */
    background-color: #fff !important;
    box-sizing: border-box;

    color: #495057;
    font-size: 1rem;
    line-height: 1.5;
}

/* .msos-input-container → padding hoort HIER */
.msos-input-container {
    display: flex;
    align-items: center;
    flex: 1 1 auto;

    padding: 0.375rem 0.75rem !important; /* Bootstrap padding */
    min-height: 28px;
    width: 100%;
}

/* Focus state zoals Bootstrap */
.msos-container:focus-within {
    border-color: #80bdff !important;
    box-shadow: 0 0 0 .2rem rgba(0,123,255,.25) !important;
}
/* EINDE voor multiselect velden */


/* Maak radio buttons groter */
input[type="radio"] {
    transform: scale(1.4);
    margin-top: 3px;        /* iets omlaag */
    margin-right: 6px;      /* ruimte tussen knop en tekst */
    vertical-align: middle; /* uitlijnen met tekst */
}

/* Optioneel: cursor als handje */
input[type="radio"] {
    cursor: pointer;
}

/* Optioneel: label netjes uitlijnen */
input[type="radio"] + label {
    vertical-align: middle;
    cursor: pointer;
}

input[type="checkbox"] {
    cursor: pointer;
}

/* Optioneel: cursor als handje */
input[type="checkbox"] {
    cursor: pointer;
}

/* Optioneel: label netjes uitlijnen */
input[type="checkbox"] + label {
    vertical-align: middle;
    cursor: pointer;
}

/* Maak checkbox groter */
input[type="checkbox"] {
    width: 18px;
    height: 18px;
    transform: scale(1.3); /* visueel vergroten */
    margin-right: 8px; /* ruimte tussen checkbox en tekst */
    cursor: pointer;
    vertical-align: middle;
}